<template>
	<div>
		<div v-if="loading" class="loading">
			<img src="../../assets/commonImg/loading-2.gif" />
		</div>
		<div v-if="error" class="error">
			{{error}}
		</div>
		<div class="div_box" style="padding-bottom: 1.1rem;">
			<top-index :projects="project"></top-index>
			<banner :banners="banner"></banner>
			<navs :nav="navs"></navs>
			<zhibo :zhibo="zhibo"></zhibo>
			<shiting :shiting="shiting"></shiting>
			<news :news="news"></news>
		</div>
		<bottom></bottom>
	</div>
</template>

<script>
	import axios from 'axios'
	import TopIndex from './pages/top.vue'
	import banner from './pages/banner.vue'
	import navs from './pages/navs.vue'
	import zhibo from './pages/zhibo.vue'
	import shiting from './pages/shiting.vue'
	import news from './pages/news.vue'
	import bottom from '../common/bottom.vue'
	export default {
		name: 'Index',
		components: {
			TopIndex,
			banner,
			navs,
			zhibo,
			shiting,
			news,
			bottom
		},
		data: function() {
			return {
				project: {},
				banner: [],
				navs: [],
				zhibo: [],
				shiting: [],
				news: [],
				activeproject: "",
				loading:false,
				error:null
			}
		},
		mounted: function() {
			this.activeproject = this.$route.params.project
			this.getData();
			console.log(this.activeproject)
		},
		watch:{
			'$route': 'getData'
		},
		methods: {
			getData: function() {
				this.loading = true
				axios.get('/api/index.json',{
						params:{
							activeproject:this.activeproject
						}
					})
					.then(this.getDataSuc)
					.catch(err => {
						console.log(err)
						this.error = err.toString()
					})
			},
			getDataSuc: function(res) {
				this.loading = false
				this.project = res.data.data[0].project
				this.banner = res.data.data[0].banners
				this.navs = res.data.data[0].navs
				this.zhibo = res.data.data[0].zhibo
				this.shiting = res.data.data[0].shiting
				this.news = res.data.data[0].news
			}
		}
	}
</script>

<style>
	body {
		background: #FCFCFC;
		min-height: 100%;
	}

	.zb_index_title {
		width: 100%;
		margin: .4rem auto .28rem;
	}

	.zb_index_title p {
		font-size: .33rem;
		line-height: .52rem;
	}

	.zb_index_title span a {
		background: #F2F2F2;
		display: inline-block;
		font-size: .26rem;
		border-radius: 20px;
		padding: .1rem .2rem;
		color: #333;
	}

	.index_list li {
		display: inline-block;
		width: 47%;
		margin-right: 5%;
	}

	.index_list li:nth-child(2n) {
		margin-right: 0px;
	}

	.index_list li img {
		width: 100%;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
	}

	.index_list .content {
		background: #fff;
		box-shadow: 0px 2px 10px 0px rgba(193, 193, 193, 0.17);
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
		text-align: left;
		padding: .2rem .15rem;
	}

	.index_list .content p {
		color: #333;
		font-size: .28rem;
		line-height: .30rem;
		margin-bottom: .18rem;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.index_list .content span {
		color: #999;
		font-size: .26rem;
		display: block;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
